<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑鲨商城 </title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1893347_im1fp7l603.css">
    <link rel="stylesheet" href="/css/mall.css">
</head>
<body>
    <!-- 头部导航 -->
    <header>
       
    </header>
    <section class="wrap">
        <!-- 轮播图 -->
        <div class="swiper-container ">
            <div class="swiper-wrapper lunbo">
                <div class="swiper-slide"><img  src="/images/mall/banner-1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/images/mall/banner-2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/images/mall/banner-3.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            
        </div>



        <!-- <section class="lunbo"> -->
            
            
            
            <!--  轮播图小点-->
            <!-- <section class="bar">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3 show"></div>
            </section> -->
        <!-- </section> -->
    </section>
    <main>
        <!-- 黑鲨3 -->
        <div class="content-blackshark3 product-4">
            <p>腾讯黑鲨游戏手机3</p>
            <ul class="content-list" id ="BlackShark3-content"></ul>
            <script type="text/html" id="blackshark3template">
                {{each list item}}
                    <a href="/html/goodsinfo.html?id={{item.id}}">
                        <li>
                            <span class="new">新品</span>
                            <img src="{{item.src}}" alt="">
                            <div>
                                <span>{{item.title}}</span>
                                <span>{{item.desc}}</span>
                            </div>
                            <p>￥{{item.price}}</p>
                        </li>
                    </a>
                {{/each}}
            </script>
        </div>
        <!-- 黑鲨3 Pro-->
        <div class="content-blackshark3pro product-4">
            <p>腾讯黑鲨游戏手机3 Pro</p>
            <ul class="content-list" id="blackshark3pro-content"></ul>
            <script type="text/html" id="blackshark3protemplate">
                {{each list item}}
                    <a href="/html/goodsinfo.html?id={{item.id}}">
                        <li>
                            <span class="new">新品</span>
                            <img src="{{item.src}}" alt="">
                            <div>
                                <span>{{item.title}}</span>
                                <span>{{item.desc}}</span>
                            </div>
                            <p>￥{{item.price}}</p>
                        </li>
                    </a>
                {{/each}}
            </script>
        </div>
        <!-- 配件 -->
        <div class="content-supporters product-4">
            <p>热门游戏配件</p>
            <button class="orderUp" data-id="0">按价格升序</button>
            <button class="orderDown" data-id="0">按价格降序</button>
            <ul class="content-list" id="supporters-content"></ul>
            <script type="text/html" id="suppoterstemplate">
                {{each list item}}
                    <a href="/html/goodsinfo.html?id={{item.id}}">
                        <li>
                            <span class="new">新品</span>
                            <img src="{{item.src}}" alt="">
                            <div>
                                <span>{{item.title}}</span>
                                <span>{{item.desc}}</span>
                            </div>
                            <p>￥{{item.price}}</p>
                        </li>
                    </a>
                {{/each}}
            </script>
            <span class="viewMore">查看更多<i class="iconfont icon-gengduo"></i></span>
        </div>
        <!-- 黑鲨游戏壳/膜 -->
        <div class="content-Case product-4">
            <p>黑鲨游戏壳/膜</p>
            <button class="orderUp" data-id="1">按价格升序</button>
            <button class="orderDown" data-id="1">按价格降序</button>
            <ul class="content-list" id="case-content"></ul>
            <script type="text/html" id="casetemplate">
                {{each list item}}
                    <a href="/html/goodsinfo.html?id={{item.id}}">
                        <li>
                            <span class="new">新品</span>
                            <img src="{{item.src}}" alt="">
                            <div>
                                <span>{{item.title}}</span>
                                <span>{{item.desc}}</span>
                            </div>
                            <p>￥{{item.price}}</p>
                        </li>
                    </a>
                {{/each}}
            </script>
            <span class="viewMore">查看更多<i class="iconfont icon-gengduo"></i></span>
        </div>
        <!-- 游戏耳机/适配器/数据线 -->
        <div class="content-Headphones product-4">
            <p>游戏耳机/适配器/数据线</p>
            <button class="orderUp" data-id="2">按价格升序</button>
            <button class="orderDown" data-id="2">按价格降序</button>
            <ul class="content-list" id="headphones-content"></ul>
            <script type="text/html" id="headphonestemplate">
                {{each list item}}
                    <a href="/html/goodsinfo.html?id={{item.id}}">
                        <li>
                            <span class="new">新品</span>
                            <img src="{{item.src}}" alt="">
                            <div>
                                <span>{{item.title}}</span>
                                <span>{{item.desc}}</span>
                            </div>
                            <p>￥{{item.price}}</p>
                        </li>
                    </a>
                {{/each}}
            </script>
            <span class="viewMore">查看更多<i class="iconfont icon-gengduo"></i></span>
        </div>
    </main>
    <!-- 售后 -->
    <section class="protect">
        
    </section>
    <!-- 底部 -->
    <footer>

    </footer>

</body>
<script src="/libs/require/require.min.js" data-main="/js/mall"></script>
<!-- <script src="/libs/swiper/js/swiper.min.js"></script> -->
</html>